<template>
  <div style="background-color: #ececec; padding: 20px">
    <a-row :gutter="24">
      <a-col :span="12">
        <a-card title="系统概览" :bordered="false">
          <p>累计发表了30篇文章</p>
          <p>累计创建了13个分类</p>
          <p>累计创建了41个标签</p>
          <p>累计上传了2712个文件</p>
          <p>累计获得了5个评论</p>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="个人资料" :bordered="false">
          <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="1" tab="基本设置">
              <!-- 搜索 -->
              <a-form name="customized_form_controls" layout="inline" :model="values" @finish="onFinish"
                style="margin: 30px 0; background: #fff" expandFixed="true">
                <div class="form_item">
                  <a-form-item>
                  <a-upload v-model:file-list="fileList" name="file"
                    @change="handleChange" :customRequest="setfile"
                    :showUploadList="false"
                    >
                    <img :src="values.avatar" class="avatar_imgs" alt="">
                  </a-upload>
                  </a-form-item>
                </div>
                <div class="form_item">
                <a-form-item name="title" label="用户名">
                  <a-input v-model:value="values.name" placeholder="请输入名称" />
                </a-form-item>
                </div>
                <div class="form_item">
                <a-form-item name="email" label="邮箱">
                  <a-input v-model:value="values.email" placeholder="请输入名称" />
                </a-form-item>
                </div>
                <a-form-item expandFixed="right">
                  <a-button type="primary" html-type="submit">保存</a-button>
                </a-form-item>
              </a-form>

            </a-tab-pane>
            <a-tab-pane key="2" tab="更新密码" force-render>
              <!-- 搜索 -->
              <a-form name="customized_form_controls" layout="inline" :model="pasdssa" @finish="onFinishs"
                style="margin: 30px 0; background: #fff" expandFixed="true">
                <div class="form_item">
                <a-form-item name="pasd" label="原密码">
                  <a-input v-model:value="pasdssa.pasd" placeholder="请输入原密码" />
                </a-form-item>
                </div>
                <div class="form_item">
                <a-form-item name="npasd" label="新密码">
                  <a-input v-model:value="pasdssa.npasd" placeholder="请输入新密码" />
                </a-form-item>
                </div>
                <div class="form_item">
                <a-form-item name="qpasd" label="确认密码">
                  <a-input v-model:value="pasdssa.qpasd" placeholder="请输入确认密码" />
                </a-form-item>
                </div>
                <a-form-item expandFixed="right">
                  <a-button type="primary" html-type="submit">保存</a-button>
                </a-form-item>
              </a-form>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive,watch } from "vue"
import { storeToRefs } from "pinia";
import { useLogin } from "../../store/login";
import { useFiles } from "../../store/files"

const ufiles = useFiles();
const logins = useLogin();
let { userobj } = storeToRefs(logins)
let { cover } = storeToRefs(ufiles)
let activeKey = ref('1');
const fileList = ref([]);
let values = reactive({
  name: userobj.value.name || "",
  email: userobj.value.email || "",
  avatar:userobj.value.avatar||""
})
let pasdssa = reactive({
  pasd: "",
  npasd: "",
  qpasd: ""
})
//用户名，邮箱
const onFinish = () => {
  console.log(values, "values")
  let obj = {...userobj.value};
  obj = {
    ...obj,
    name:values.name,
    email:values.email,
    avatar:values.avatar
  }
  logins.editusers(obj)
}
//用户密码
const onFinishs = () => {
  console.log(pasdssa, "pasdssa")
}
//监听
watch(cover,(newval)=>{
// console.log(newval,"cover avatar")
values.avatar = newval
})

const handleChange = async (info: any) => {
  console.log(info.file.originFileObj,"info")
  ufiles.uploadfile(info.file.originFileObj)
};
const setfile = ()=>{

}
</script>

<style lang="scss">
.avatar_imgs{
  width: 50px;
  height: 50px;
  display: flex;
  border-radius: 50%;
  margin: 0 auto;
}
</style>